<template>
  <PageWrapper>
    <BasicTable @register="registerTable" @edit-end="handleEditEnd">
      <template #headerTop>
        <a-alert type="info" show-icon>
          <template #message>
            <template v-if="checkedKeys.length > 0">
              <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
              <a-button type="link" @click="deleteBathIds" size="small">删除选中</a-button>
              <a-button type="link" @click="clearSelectedRowKeys" size="small">清空</a-button>
            </template>
            <template v-else>
              <span>未选中任何项目</span>
            </template>
          </template>
        </a-alert>
      </template>
      <template #toolbar>
        <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '详情',
              color: 'success',
              onClick: handleInfo.bind(null, record),
            },
            {
              label: '编辑',
              onClick: openEditModal.bind(null, record),
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '确认删除',
                okText: '确认',
                cancelText: '取消',
                confirm: handleDelete.bind(null, record),
                icon: 'ant-design:question-circle-outlined',
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <!-- <Edit @register="registerEdit" @update="reload" /> -->
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { Alert } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { teacherDeleteApiById, deleteTeacherByIds } from '/@/api/preschool/teacher';
  import { disableUserApi, getUsersApi } from '/@/api/preschool/user';
  import { getSearchFormConfig, getUserColumns } from './tableSet';
  import { useGo } from '/@/hooks/web/usePage';
  // import { useModal } from '/@/components/Modal';
  // import Edit from './Edit.vue';
  export default defineComponent({
    // name: 'TeacherList',TODO以后开缓存使用
    components: { BasicTable, AAlert: Alert, TableAction, PageWrapper },
    setup() {
      const go = useGo();
      let checkedKeys = ref<Array<string | number>>([]);

      const [registerTable, { getForm, getDataSource, clearSelectedRowKeys, reload, setLoading }] =
        useTable({
          title: '用户',
          api: getUsersApi,
          //表单列选项配置
          columns: getUserColumns(),
          // 使用搜索功能
          useSearchForm: true,
          formConfig: getSearchFormConfig(),
          // 右插槽表格工具
          showTableSetting: true,
          tableSetting: { fullScreen: true },
          // 显示序列号
          showIndexColumn: true,
          //关闭点击列选中
          clickToRowSelect: false,
          rowKey: 'id',
          rowSelection: {
            type: 'checkbox',
            onChange: onSelectChange,
          },
          actionColumn: {
            width: 240,
            title: '操作',
            dataIndex: 'action',
            slots: { customRender: 'action' },
          },
        });
      // const [registerEdit, { openModal: openModal }] = useModal();
      const teacherData = ref<any>(null);

      function getFormValues() {
        console.log('getForm' + getForm().getFieldsValue());
        console.log(getDataSource());
      }

      function onSelectChange(selectedRowKeys: (string | number)[]) {
        checkedKeys.value = selectedRowKeys;
        console.log('checkedKeys==>' + checkedKeys.value);
      }

      /**
       * @description 获取详情
       */
      function handleInfo(record: Recordable) {
        go();
        console.log(record);
      }
      /**
       * @description 使用异步解决数据刷新提前的问题
       * @param record
       */
      async function handleDelete(record: Recordable) {
        await teacherDeleteApiById(record.id).catch((error) => {
          console.log('error' + error);
        });
        // 刷新表格数据
        reload();
      }
      const deleteBathIds = async () => {
        setLoading(true);
        await deleteTeacherByIds(checkedKeys.value);
        reload();
        setLoading(false);
      };
      /**
       * @description 模态框
       */
      function openEditModal(record: Recordable) {
        console.log('获取id' + record.id);

        teacherData.value = record;
        // openModal(true, teacherData.value);
      }
      async function handleEditEnd({ record, index, key, value }: Recordable) {
        console.log(record, index, key, value);
        let res = await disableUserApi(record);
        console.log(res);

        return false;
      }
      return {
        registerTable,
        getFormValues,
        checkedKeys,
        onSelectChange,
        // lin
        handleInfo,
        handleDelete,
        clearSelectedRowKeys,
        // registerEdit,
        openEditModal,
        reload,
        deleteBathIds,
        handleEditEnd,
      };
    },
  });
</script>
